Account for the viewport size in image preview

[akatsoulas]

• Close modal on Esc
• Close modal on clickOut

[escattone]

I'm seeing something strange when I test this locally. When I click on an uploaded -- but not yet submitted -- image to preview it, I get two image modals, one on top of the other. So, for example, when I click on an uploaded image for preview I see this:

and when I close that image, I see that there's another of the same image below it, but it's a bit narrower:

After the image has been submitted as part of the question, and I click on the image to preview it, I don't see that behavior:

Two more minor things:

• The close (X) button is barely visible for me, although I can reach it.
• When I click on the esc key, it not only closes the image, but also takes my browser window out of full-screen mode. Is that because we're not stopping the propagation of that event after closing the image modal?

[akatsoulas]

The X button should be visible now. I wasn't able though to replicate any of the issues you mentioned earlier. Could you maybe do a fresh build and then run make init and npm run webpack:build?

[escattone]

@akatsoulas The X button placement looks great now. However, even after doing a make clean, make init, and an extra npm run webpack:build I still see two image modals initially when previewing. This is definitely an improvement though, and my issue may be just something on my end, so I'm approving this.